<template>
  <el-container class="full-height">
    <el-aside :width="computeWidth" class="full-height">
      <el-menu
        default-active="1-4-1"
        class="el-menu-vertical"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        router
      >
        <!-- <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">导航一</span>
          </template>
          <el-menu-item-group>
            <span slot="title">分组一</span>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <span slot="title">选项4</span>
            <el-menu-item index="1-4-1">选项1</el-menu-item>
          </el-submenu>
        </el-submenu> -->

        <div v-for="m in menus" :key="m.title">
          <el-menu-item :index="m.url">
            <i :class="[m.icon]"></i>
            <span slot="title">{{ m.title }}</span>
          </el-menu-item>
        </div>

        <!-- <el-menu-item index="4">
          <i class="el-icon-setting"></i>
          <span slot="title">导航四</span>
        </el-menu-item> -->
      </el-menu>
    </el-aside>
    <el-container class="full-height">
      <el-header>
        <el-row
          type="flex"
          :gutter="2"
          justify="space-between"
          align="middle"
          class="header-box"
        >
          <el-col :span="2"
            ><i
              class="collapse-icon"
              :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
              @click="isCollapse = !isCollapse"
            ></i>
          </el-col>
          <el-col :span="14"
            ><span class="app-title">QianKun微前端测试系统</span></el-col
          >
          <el-col :span="8"></el-col>
        </el-row>
      </el-header>
      <el-main>
        <router-view />
        <div id="micro-container">
          <!-- 微应用加载区域 -->
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      isCollapse: false,
    };
  },
  computed: {
    ...mapState(["menus"]),
    computeWidth() {
      if (this.isCollapse) return "65px";
      return "200px";
    },
  },
  mounted() {},
  methods: {
    handleOpen(e) {},
    handleClose(e) {},
  },
};
</script>
<style scoped>
/deep/.el-main {
  padding: 8px;
}
.full-height {
  height: 100%;
}

.el-menu-vertical {
  height: 100%;
  overflow: hidden auto;
}

.el-header {
  line-height: 60px;
  border-bottom: 1px solid #e6e6e6;
}

.collapse-icon {
  font-size: 24px;
  vertical-align: middle;
  color: #464646;
  cursor: pointer;
}

.el-aside {
  transition: width 0.5s ease-in-out;
}

.app-title {
  font-size: 24px;
  color: #545454;
  font-weight: 500;
}
.micro-container {
  width: 100%;
}
</style>
